<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box{
            width: 300px;
            height: 300px;
        }
        /* 在小于768px的屏幕上生效 ——手机 */
        @media screen and (max-width:768px){
            .box{
                background-color: blue;
                
            }

            .p1,.p2{
                display: none;
            }
        
        }

        /* 在大于768小于996的屏幕上生效——平板*/
            @media screen and (min-width:768px) and (max-width:996px) {
                .box{
                    background-color: green;
                }
                .p1{
                    display: none;    /*none为不显示,block变为块级元素,inline变为行内元素*/
                }
                .p2{
                    display: block;
                }
            }
            
            /* 在大于996的屏幕上生效_电脑 */
            @media screen and (min-width:996px) {
                .box{
                    background-color: brown;
                }
                .p1,.p2{
                    display: block;
                }
                
            }
        

    </style>
</head>
<body>

    <div class="box"></div>
    <p class="p1">1234</p>
    <p class="p2">5678</p>
    
</body>
</html>